<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>detail</title>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <script src="flexible.js"></script>
    <style>
        html, body, .app {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .app {
            position: relative;
            font-size: 12px;
        }

        .banner {
            width: 10rem;
            height: 6.4rem;
            background: #ddd;
            position: relative;
        }

        .detail {
            width: 10rem;
            box-sizing: border-box;
            padding: 0.427rem;
        }

        .detail .title {
            font-size: 18px;
            color: #22262F;
        }

        .detail .time {
            font-size: 12px;
            color: #99A2B2;
            margin: 0.213rem 0;
        }

        .detail .address {
            font-size: 13px;
            color: #666F81;
        }

        .tag-box {
            margin: 0.267rem 0;
        }

        .tag-box .tag {
            padding: 0.133rem 0.147rem;
            background: rgba(255, 139, 9, 0.1);
            border-radius: 8px;
            color: #FF8B09
        }

        .tag-box .tag.green {
            background: rgba(24, 176, 122, 0.1);
            color: #18B07A
        }

        .m-l-24 {
            margin-left: 0.32rem;
        }

        .desc {
            line-height: 18px;
            color: #666F81;
            text-align: justify;
        }

        .gary-block {
            width: 10rem;
            height: 0.227rem;
            background: #F5F6F8;
        }

        .other-content {
            width: 100%;
            min-height: 4rem;
            background: #fff;
            box-sizing: border-box;
            padding: 0.427rem;
        }

        .gary-block-h {
            width: 10rem;
            height: 2rem;
            background: #F5F6F8;
        }

        .other-content .title {
            color: #22262F;
            font-size: 14px;
        }

        .other-content .row-line {
            margin-top: 0.427rem;
        }

        .other-content .row-line .label {
            display: inline-block;
            width: 1.053rem;
            height: 0.32rem;
            color: #99ADB7;
            text-align: justify;
        }

        .other-content .row-line .text {
            color: #667881;
            margin-left: 0.213rem;
        }

        #banner {
            width: 100%;
            height: 100%;
        }

        /*css样式*/
        [v-cloak] {
            display: none;
        }

        .app .banner .back {
            position: absolute;
            width: 0.587rem;
            height: 0.587rem;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            left: 0.213rem;
            top: 0.213rem;
            color: #fff;
            text-align: center;
            line-height: 0.587rem;
            text-decoration: none;
            z-index: 1000;
            background: url('./images/icon-left@2x.png') no-repeat;
            background-size: 0.587rem 0.587rem;
        }

        .app .banner .back > img {
            position: absolute;
            top: 0;
            left: 0;
        }

        .app .banner .page-info {
            position: absolute;
            width: 0.853rem;
            height: 0.427rem;
            line-height: 0.427rem;
            border-radius: 0.263rem;
            background: rgba(0, 0, 0, 0.5);
            right: 0.427rem;
            bottom: 0.213rem;
            color: #fff;
            text-align: center;
            z-index: 1000;
            padding: 0.05rem 0;
        }

        .swiper-slide__banner > img {
            width: 10rem;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="app" id="app" v-cloak>
    <template v-if="info">
        <div class="banner">
            <a :href="'./map.html' + window.location.search" class="back"></a>
            <div class="page-info">{{currentPage}}/{{info.images.length}}</div>
            <div class="swiper-container" id="banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide__banner" v-for="(img,i) in info.images" :key="i">
                        <img :src="img" alt="img">
                    </div>
                </div>
                <div class="swiper-pagination pagination banner__pagination"></div>
            </div>
        </div>
        <div class="detail">
            <div class="title">{{info.title}}</div>
            <div class="time">{{info.time}}</div>
            <div class="address">
                <img src="./images/icon-dingwei.svg" alt="address"
                     style="width: 0.427rem;height: 0.427rem;position: relative;top:0.08rem;">
                <span>{{info.address}}</span>
            </div>
            <div class="tag-box">
            <span class="tag"
                  v-for="(tag,index) in info.tags"
                  :class="{
                    'm-l-24': index > 0,
                    green: index == 1
                  }"
                  :key="index"
            >{{tag}}</span>
            </div>
            <div class="desc">{{info.desc}}</div>
        </div>
        <div class="gary-block"></div>
        <div class="other-content">
            <div class="title">其他信息</div>
            <div class="row-line">
                <span class="label">联系人:</span>
                <span class="text">{{info.name | spaceIcon}}</span>
            </div>
            <div class="row-line">
                <span class="label">电&nbsp;&nbsp;&nbsp;话:</span>
                <span class="text">{{info.phone | spaceIcon}}</span>
            </div>
            <div class="row-line">
                <span class="label">交&nbsp;&nbsp;&nbsp;通:</span>
                <span class="text">{{info.traffic | spaceIcon}}</span>
            </div>
            <div class="row-line">
                <span class="label">商&nbsp;&nbsp;&nbsp;业:</span>
                <span class="text">{{info.commercialSupport | spaceIcon}}</span>
            </div>
        </div>
        <div class="gary-block-h"></div>
    </template>
</div>
<script src="js/idangerous.swiper.min.js"></script>
<!--<script src="js/vue.js"></script>-->
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/commonParams.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                info: null,
                currentPage: 1
            }
        },
        mounted: function () {
            const _that = this;
            const id = this.getQueryVariable('id')
            const type = this.getQueryVariable('type')
            this.queryDetail(type,id).then(function (res) {
                const data = getData(res);
                _that.info = {
                    title: data.name,
                    // time: data.time,
                    address: data.address,
                    tags: Object.values(data.tags),
                    desc: data.introduce,
                    images: data.imgUrl.map(function (item) {
                        return baseUrl + '/ZJCMS_war/' + item
                    }),
                    name: data.contact,
                    phone: data.contactNumber,
                    traffic: data.traffic,
                    commercialSupport: data.commercialSupport
                }
                _that.$nextTick(function(){
                    _that.initSwiper();
                });
            })
        },
        filters:{
            spaceIcon:function(val){
                if(!val) return '-'
                return val
            }
        },
        methods: {
            getQueryVariable: function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return false;
            },
            queryDetail(type, id) {
                let api = ''
                if (type == 1) api = '/TalentApartment/getInfo'
                if (type == 2) api = '/CharacteristicPark/getInfo'
                if (type == 3) api = '/PublicServicePlatform/getInfo'
                return axios.get(baseUrl + '/ZJCMS_war/' + api + '?id=' + id)
            },
            initSwiper: function () {
                var _that = this
                // banner轮播
                var swiperBanner = new Swiper('#banner', {
                    loop: true, //设置为true，则开启loop（环路）模式，默认为false
                    speed: 600,//滑动速度
                    autoplayDisableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay，默认为true：停止。
                    pagination: '.banner__pagination',
                    paginationClickable: true,
                    onSlideChangeEnd: function (swiper) {
                        _that.currentPage = swiper.activeIndex === _that.info.images.length + 1 ? '1' : swiper.activeIndex
                    },
                });
            }
        }
    })
</script>
</body>
</html>
